<template>
    <a-card :bordered="false">
        <div>
            <a-button @click="channelNo=1" type="primary">入口</a-button>
            <a-button @click="channelNo=2" type="primary">出口</a-button>
            <br>
            <iframe
                :src="'https://open.ys7.com/ezopen/h5/iframe?themeId=pcRec&url=ezopen://open.ys7.com/FD6034784/'+channelNo+'.hd.live&autoplay=1&accessToken='+token"
                width="900" height="600" id="ysOpenDevice" allowfullscreen v-if="iframeShow">
            </iframe>
            <!-- <div id="ezuikit-player"></div>
            <a-button @click="initEZUIKitPlayer" type="primary" icon="plus">开始播放</a-button>
            <a-button @click="stop" type="primary" icon="plus">停止播放</a-button> -->
        </div>
    </a-card>
</template>

<script>
import { getAction } from '../../api/manage';
export default {
    name: 'EZUIKitPlayer',
    data() {
        return {
            channelNo: 1,
            iframeShow: false,
            token: undefined,
            address: undefined,
            EZOPENDemo: null,
            width: 800,
            height: 600,
            url: {
                getToken: "/carRecord/carRecord/getToken",
                getAddress: "/carRecord/carRecord/getAddress"
            },
        };
    },
    mounted() {
        this.getToken()
    },
    methods: {
        getToken() {
            getAction(this.url.getToken).then((res) => {
                if (res.success) {
                    this.token = res.result
                    console.log(this.token)
                    this.iframeShow = true
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        initEZUIKitPlayer() {
            // let url = "https://open.ys7.com/api/lapp/token/get"
            // const postData = new URLSearchParams({
            //     plateNo: record.plateNo,
            //     begintime: formattedNow,
            //     endtime: formattedTomorrow,
            //     plateColor: '2'
            // });
            if (this.token && this.url)
                this.EZOPENDemo = new EZUIKit.EZUIKitPlayer({
                    id: 'ezuikit-player',
                    width: this.width,
                    height: this.height,
                    template: 'pcRec',
                    url: this.address,
                    accessToken: this.token
                });
        },
        stop() {
            this.EZOPENDemo.stop()
        }
    }
};
</script>

<style scoped>
.playWind {
    padding: 0;
    margin: 0;
    text-align: center;
    background: rgba(0, 0, 0, 0.8);
    overflow: hidden;
}
</style>